import { useState, useContext } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { AuthContext } from '@/contexts/authContext';
import { Eye, EyeOff } from 'lucide-react';
import { toast } from 'sonner';

export default function RegistrationPage() {
  const { login } = useContext(AuthContext);
  const navigate = useNavigate();
  
  const [activeTab, setActiveTab] = useState<'login' | 'register'>('register');
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  
  // 注册表单状态
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    confirmPassword: '',
    email: '',
    phone: ''
  });
  
  // 处理表单输入变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };
  
  // 处理注册提交
  const handleRegister = (e: React.FormEvent) => {
    e.preventDefault();
    
    // 简单表单验证
    if (!formData.username || !formData.password || !formData.email) {
      toast('请填写必要的注册信息');
      return;
    }
    
    if (formData.password !== formData.confirmPassword) {
      toast('两次输入的密码不一致');
      return;
    }
    
    // 模拟注册成功
    toast('注册成功！欢迎来到智绘童话AI工场');
    
    // 自动登录并跳转到首页
    login(formData.username);
    navigate('/home');
  };
  
  // 切换密码可见性
  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };
  
  // 切换确认密码可见性
  const toggleConfirmPasswordVisibility = () => {
    setShowConfirmPassword(!showConfirmPassword);
  };
  
  return (
    <div className="min-h-screen bg-gradient-to-b from-pink-50 to-blue-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
      {/* 注册页面本身就是居中的，不需要额外的容器 */}
       {/* 标题区域 - 智能体形象 */}
      <div className="text-center mb-8">
           <div className="w-20 h-20 mx-auto mb-2 overflow-hidden rounded-full">
             <img 
               src="https://lf-code-agent.coze.cn/obj/x-ai-cn/307173148162/attachment/e7cb1a9e560c13e8924d04f1d807bc45_20251022234653.jpg" 
               alt="童话家" 
               className="w-full h-full object-cover" 
             />
           </div>
        <h1 className="text-3xl font-bold text-gradient">童话家 - 你的AI故事伙伴</h1>
        <p className="text-gray-500 mt-2">和童话家一起创造属于你的神奇故事</p>
      </div>
      
      {/* 表单卡片 */}
      <div className="w-full max-w-md bg-white rounded-xl border border-pink-100 shadow-lg p-8 card-gradient">
        {/* 标签页 */}
        <div className="flex mb-6 border border-pink-100 rounded-lg overflow-hidden">
          <button
            className={`flex-1 py-2 text-center ${activeTab === 'login' ? 'bg-white text-gray-700' : 'bg-white text-gray-400'}`}
            onClick={() => navigate('/login')}
          >
            登录
          </button>
          <button
            className={`flex-1 py-2 text-center ${activeTab === 'register' ? 'bg-gradient-to-r from-pink-100 to-blue-100 text-pink-500 border-l border-pink-200' : 'bg-white text-gray-400'}`}
            onClick={() => setActiveTab('register')}
          >
            注册
          </button>
        </div>
        
        {/* 注册表单 */}
        <form onSubmit={handleRegister}>
          {/* 用户名 */}
          <div className="mb-4">
            <label htmlFor="username" className="block text-sm font-medium text-gray-500 mb-1">
              用户名
            </label>
            <input
              type="text"
              id="username"
              name="username"
              value={formData.username}
              onChange={handleInputChange}
              placeholder="请输入用户名"
              className="w-full px-4 py-2.5 bg-white border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 text-gray-800"
              required
            />
          </div>
          
          {/* 密码 */}
          <div className="mb-4">
            <label htmlFor="password" className="block text-sm font-medium text-gray-500 mb-1">
              密码
            </label>
            <div className="relative">
              <input
                type={showPassword ? 'text' : 'password'}
                id="password"
                name="password"
                value={formData.password}
                onChange={handleInputChange}
                placeholder="请输入密码"
                className="w-full px-4 py-2.5 bg-white border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 text-gray-800"
                required
              />
              <button
                type="button"
                onClick={togglePasswordVisibility}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
              >
                {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
              </button>
            </div>
          </div>
          
          {/* 确认密码 */}
          <div className="mb-4">
            <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-500 mb-1">
              确认密码
            </label>
            <div className="relative">
              <input
                type={showConfirmPassword ? 'text' : 'password'}
                id="confirmPassword"
                name="confirmPassword"
                value={formData.confirmPassword}
                onChange={handleInputChange}
                placeholder="请再次输入密码"
                className="w-full px-4 py-2.5 bg-white border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 text-gray-800"
                required
              />
              <button
                type="button"
                onClick={toggleConfirmPasswordVisibility}
                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
              >
                {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
              </button>
            </div>
          </div>
          
          {/* 邮箱 */}
          <div className="mb-4">
            <label htmlFor="email" className="block text-sm font-medium text-gray-500 mb-1">
              邮箱
            </label>
            <input
              type="email"
              id="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              placeholder="请输入邮箱地址"
              className="w-full px-4 py-2.5 bg-white border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 text-gray-800"
              required
            />
          </div>
          
          {/* 手机号 */}
          <div className="mb-6">
            <label htmlFor="phone" className="block text-sm font-medium text-gray-500 mb-1">
              手机号
            </label>
            <input
              type="tel"
              id="phone"
              name="phone"
              value={formData.phone}
              onChange={handleInputChange}
              placeholder="请输入手机号"
              className="w-full px-4 py-2.5 bg-white border border-pink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-400 text-gray-800"
            />
          </div>
          
          {/* 注册按钮 */}
          <button
            type="submit"
            className="w-full bg-gradient-to-r from-pink-500 to-blue-500 text-white font-medium py-2.5 px-4 rounded-lg hover:opacity-90 transition-all duration-300 btn-gradient"
          >
            注册
          </button>
        </form>
        
        {/* 返回登录 */}
        <div className="mt-6 text-center">
          <p className="text-gray-500 text-sm">
            已有账号？ <Link to="/login" className="text-pink-500 hover:text-pink-400 font-medium">立即登录</Link>
          </p>
        </div>
      </div>
    </div>
  );
}